<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<!--标题栏-->
<div class="container">
    <div class="div1">
        <a href="http://taobao.com" class="a1">小米商城</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">MIUI</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">云服务</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">金融</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">有品</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">小爱开放平台</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">企业团购</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">资质证照</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">协议规则</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">下载app</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">Select Region</a>
    </div>
    <div class="div3">
        <a href="http://taobao.com" class="a1">登录</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">注册</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a1">消息通知</a>
    </div>
    <div class="div2">
        <a href="http://taobao.com" class="a1">购物车</a>
    </div>
</div>
<!--第二行-->
<div class="container" style="background-color:white; height: 100px;">
    <!--小米图标-->
    <div class="div2" style="background-color:white; padding-top: 22px;margin-left: 150px;
    height: 78px; float: left">
        <img src="mi.png">
    </div>
    <!--文字选项-->
    <div class="div2" style="background-color:white; height: 70px;padding-top:30px;width: 900px">
        <a href="http://taobao.com" class="a2" style="font-size: 20px">小米手机</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">Redmi红米</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">电视</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">笔记本</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">家电</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">路由器</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">智能硬件</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">服务</a>
        <span class="span1">&nbsp|&nbsp</span>
        <a href="http://taobao.com" class="a2" style="font-size: 20px">社区</a>
        <span class="span1">&nbsp|&nbsp</span>
    </div>
    <!--搜索框-->
    <div class="div2" style="background-color:white; height: 60px;padding-top:30px;width: 150px">
        <input type="text" style="line-height: 20px;color: gray();" placeholder="小米9">
    </div>
</div>
<!--第三行-->
<div class="back">
    <!--列表-->
    <div style="width: 200px; height: 460px;">
    <ul>
        <li style="height: 10px"></li>
        <li><a class="a1" style="font-size: 14px">手机&nbsp电话卡&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">电视&nbsp盒子&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">笔记本&nbsp平板&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">家电&nbsp插线板&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">出行&nbsp穿戴&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">智能&nbsp路由器&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">电源&nbsp配件&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">健康&nbsp儿童&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">耳机&nbsp音响&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
        <li><a class="a1" style="font-size: 14px">生活&nbsp箱包&nbsp&nbsp&nbsp&nbsp&nbsp></a></li>
    </ul>
    </div>
</div>
<!--第四行-->
<div style="height: 170px; width: 1226px; margin-left: 150px; background-color:white;">
    <!--第一个盒子-->
    <div style="height: 164px; width: 300px; background-color:#646464; margin-top: 15px;
     display: inline-block; float: left">
        <div style="width: 300px; height: 82px;background-color:#646464;display: inline-block">
            <table cellpadding="10x" style="width: 300px; height: 82px;">
                <tbody>
                    <tr>
                        <td><a class="a1" style="font-size: 15px;">小米秒杀</a></td>
                        <td><a class="a1" style="font-size: 15px;">企业团购</a></td>
                        <td><a class="a1" style="font-size: 15px">F码通道</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="width: 300px;height: 82px;background-color:#646464; display: inline-block">
            <table cellpadding="18x" style="width: 300px; height: 82px;">
                <tbody>
                    <tr>
                        <td><a class="a1" style="font-size: 15px">米粉卡</a></td>
                        <td><a class="a1" style="font-size: 15px">以旧换新</a></td>
                        <td><a class="a1" style="font-size: 15px">花费充值</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--第二个盒子-->
    <div style="height: 164px; width: 300px; background-color:#646464; margin-top: 15px; margin-left:8px;
    display: inline-block; float: left;background-size: cover;background-image: url('1.jpg')">
    </div>
    <!--第三个盒子-->
    <div style="height: 164px; width: 300px; background-color:#646464; margin-top: 15px; margin-left:8px;
    display: inline-block; float: left;background-size: cover;background-image: url('2.jpg')">
    </div>
    <!--第四个盒子-->
    <div style="height: 164px; width: 300px; background-color:#646464; margin-top: 15px; margin-left:8px;
    display: inline-block; float: left;background-size: cover;background-image: url('3.jpg')">
    </div>
</div>
</body>
</html>